<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
				
			<view class="content">
				<view class="classType" v-if="current === 0&&leagueClass.length!==0" v-for="item in leagueClass"  @click="turn(item)">			
					<image src="/static/img/practice.png"></image>
					<view class="info">
						<text class="classType-courseName">{{item.className}}</text>
						<view class="classType-tags" >
							<text v-for="(item1,index) in item.tags">
								{{item1}}
							</text>
						</view> 
						<view class="classType-description" v-if="item.description!=null">
							{{item.description}}
						</view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>
<script>


import { getClassList } from '../../api/class'
import { chooseClasses, getSelectedClassesByUserId } from '../../api/user'
import {baseUrl} from'../../config.js'
	export default {
		data() {
			return {
				current:0,
				styleType:"text",
				items:["已选择"],
				leagueClass:[
					{
						imgs:"/static/img/practice.png",
						courseName:"飞天瑜伽1114aaaaaaaaaaaaaaaaaaa",
						tag:["五小时前","不可取消"],
						description:"11111"
						
					},
				]	
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			turn(item){
				uni.navigateTo({
					url:"/pages/detail/classesDetail?id="+item.classId
				})
			}
		},
		onLoad() {
			getSelectedClassesByUserId(uni.getStorageSync('auth')).then(res=>{
				console.log(res);
				for (var i = 0; i < res.data.data.length; i++) {
					var tags=res.data.data[i].tags.split(",")
					res.data.data[i].tags=tags
				}
				this.leagueClass=res.data.data
			})
			
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

	}
	.classType{
		display: flex;
		background-color: white;
		width: 90%;
		margin-bottom: 2vh;
		position: relative;
	}
	.classType image{
		margin: 2vh;
		width: 18vh;
		height: 10vh;
		display: flex;
		justify-content: left;
		border-radius: 1vh;
	}
	.classType text{
		/* 当文本超出view块时内容隐藏 */
		overflow: hidden;
		/* 文本突出不换行 */
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.classType-courseName{
		font-weight: bold;
		position: absolute;
		top: 2vh;
		width: 23vh;
		height: 4.5vh;
	}
	.classType-tags{
		display: flex;
		position: absolute;
		top: 6vh;
	}
	.classType-tags text{
		border: 1px solid #15CCBB;
		margin :0 0.2vh;
		padding: 0.3vh 0.7vh;
		font-size: 1vh;
		border-radius: 0.6vh;
		color: #15CCCA;
	}
	.classType-description{
		position: absolute;
		top: 9.5vh;
		color: #999999;
	}
	.classType-button{
		background-color: #15CCCA;
		width: 8vh;
		position: absolute;
		top: 8vh;
		left: 35vh;
		text-align: center;
		height: 4vh;
		line-height: 4vh;
		border-radius: 2vh;
		color: white;
	}

	
	
</style>